Forms allow us web developers to collect feedback from users. When building React applications, there are certain design patterns we can follow to create smart forms.
First and foremost, all input values should be stored in the state. React docs recommend we use controlled components. In other words, update state variables every time there’s a change in the input field. All input fields should tie their value to the state. This way it’s much easier to work with input values. We can simply access values in state object or variables.
For example, if you want to validate current value in the field, you can simply access value of the property. Without controlled components, we would have to access DOM element and its current value. This is not stable. The whole point of React is that changes should be immediately reflected. Without controlled components, input values may be difficult to synchronize.
Form validation
As I already said, you can create a custom function to check values in input fields. For complex use cases, it’s much better to use ready solutions like Formik. They save you a lot of time and allow you to set multiple conditions for validation. You can also customize requirements for different fields.
Formik keeps track of the state. You can use their custom input elements, which are automatically tied to the state. You can create a separate object for error messages and display custom feedback for each field.
Useful UI features
Let’s be honest – users don’t like to fill out forms. Therefore it’s up to us, React developers, to create user-friendly forms.
First, we should discuss the autocomplete feature. If the user is filling out a form, we can predict their input and automatically fill the input field. This way, users have to do less work. Because values are autocompleted, you get correct values – format as well as length.
Second feature is redirect after submit. This doesn’t sound useful but bear with me. Sometimes users should be redirected to another page after they submit the form. For example, after they enter their email and password credentials. If they are successfully authenticated, you might want to redirect user to a dashboard page.
You can use the new useNavigate() hook included in the react-router version 6. This library also comes with Navigate component. If you’re trying to navigate in class components, then you’ll have to use the Navigate component. This article explains the process very well:
https://simplefrontend.com/redirect-to-another-page-in-react/.
Finally, you can reset inputs after the user is done filling them out. To do this, you can use the onSubmit() event handler and use either the setState() method or the custom updater function. As you know, the useState() hook provides a custom function to update a specific state variable.
That brings us to the end. By now, you should have enough knowledge to build smart and functional forms in React.
